<template>
  <div
    class="clear-fix k-btn-wrap"
    style="height: 100%"
  >
    <ul
      class="fl num-ul"
      :style="cp_left"
    >
      <li
        v-for="(row, idx) in cp_board.ordinary"
        :key="idx"
        class="clear-fix k-row k-row-4"
      >
        <span
          v-for="(btn, i) in row.items"
          :key="i"
          class="fl k-btn k-btn-7"
          :class="['k-' + btn.type, {active: active === `l_${idx}_${i}`}]"
          @touchmove.stop="touchMove"
          @mouseMove.stop="mouseMove"
          @touchstart.stop="touchStart(`l_${idx}_${i}`, $event)"
          @mousedown.stop="mouseDown(`l_${idx}_${i}`, $event)"
          @touchend.stop="btnClick($event, btn)"
          @mouseup.stop="btnClick($event, btn)"
        >{{ btn.view || btn.text }}</span>
      </li>
    </ul>
    <ul
      class="fr sym-ul sym-pad"
      :style="cp_right"
    >
      <li
        v-for="(row, idx) in cp_board.large"
        :key="idx"
        class="k-row"
        :class="{['k-row-' + cp_board.large.length]: 1}"
      >
        <template v-for="(btn, i) in row">
          <span
            v-if="btn.expect === 'delete'"
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + cp_board.large[0].length, {active: active === `r_${idx}_${i}`}]"
            @touchstart.stop="deleteClick($event, btn, `r_${idx}_${i}`)"
            @mousedown.stop="deleteClick($event, btn, `r_${idx}_${i}`)"
            @touchend.stop="pressUp"
            @mouseup.stop="pressUp"
            @click.stop="pressClick($event, btn)"
          ><span class="k-btn-bg" /></span>
          <span
            v-else
            :key="i"
            class="k-btn"
            :class="['k-' + btn.type, 'k-btn-' + cp_board.large[0].length, {active: active === `r_${idx}_${i}`,disable: disableBtn.indexOf(btn.expect) > -1}]"
            @touchend.stop="btnClick($event, btn)"
            @mouseup.stop="btnClick($event, btn)"
            @touchstart.stop="symStart(`r_${idx}_${i}`)"
            @mousedown.stop="symStart(`r_${idx}_${i}`)"
          >{{ btn.view || btn.text }}</span>
        </template>
      </li>
    </ul>
    <!-- <span class="iconfont icon-sqrt2"></span> -->
  </div>
</template>

<script>
import { KeepPress } from './index';
import { $debounce } from './utils';
export default {
    name: 'TheCandidate',
    props: {
        boardData: {
            type: Object,
            required: false,
            default () {
                return {
                    keysText: {
                        large: [
                            [
                                {
                                    expect: 'delete',
                                    text: '删除',
                                    type: 'symbol delete',
                                },
                            ],
                            [
                                {
                                    expect: 'next',
                                    text: '下一空',
                                    type: 'symbol',
                                },
                            ],
                            [
                                {
                                    expect: 'goback',
                                    text: '返回',
                                    type: 'symbol',
                                },
                            ],
                        ],
                    },
                };
            },
        },
        candidate: {
            type: String,
            default: '',
        },
        payload: {
            type: Object,
            default () {
                return {};
            },
        },
        disableBtn: {
            type: Array,
            default () {
                return [];
            },
        },
    },
    data () {
        let press = new KeepPress();
        return {
            pressDown: press.down(($event, data) => {
                this.$emit('keep-press', $event, data);
                this.active = '';
            }, 1000),
            pressUp: press.up((e, data, cls) => {
                if (!this.pressUpRun) {
                    this.pressUpRun = true;
                    setTimeout(() => {
                        this.pressUpRun = false;
                    }, 200);
                    this.$emit('btn-click', e, {
                        text: '删除',
                        type: 'symbol delete',
                        expect: 'delete',
                    });
                }
                this.active = '';
            }),
            pressClick: press.click(($event, data) => {
                this.active = '';
                this.$emit('btn-click', $event, data);
            }),
            touchMove: $debounce(
                ({ touches }) => {
                    let { clientX, clientY } = touches[0];
                    let { x, y } = this.touche;
                    if (Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10) {
                        this.defaultClick = true;
                        this.active = '';
                    }
                },
                40,
                'fixed',
                true
            ),
            mouseMove: $debounce(
                ({ clientX, clientY }) => {
                    let { x, y } = this.touche;
                    if (Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10) {
                        this.defaultClick = true;
                        this.active = '';
                    }
                },
                40,
                'fixed',
                true
            ),
            touche: { x: 1, y: 0 },
            defaultClick: false,
            active: '',
        };
    },
    computed: {
        cp_board () {
            let { large } = this.boardData.keysText;
            let { candidate } = this;
            let splitArray = (arr, len) => {
                let arrLength = arr.length;
                let newArr = [];
                for (let i = 0; i < arrLength; i += len) {
                    newArr.push(arr.slice(i, i + len));
                }
                return newArr;
            };
            let arr = splitArray(candidate.split(''), 7);
            let ordinary = [];
            arr.map(ele => {
                let temp = { items: [] };
                ele.filter(v => {
                    let obj = {};
                    obj['text'] = v;
                    temp.items.push(obj);
                });
                ordinary.push(temp);
            });
            return {
                ordinary,
                large,
            };
        },
        cp_right () {
            return (
                this.cp_board.large && {
                    width: '20%',
                }
            );
        },
        cp_left () {
            return (
                this.cp_board.large && {
                    width: '80%',
                }
            );
        },
    },
    methods: {
        btnClick (e, data) {
            if (this.defaultClick) return;
            this.$emit('btn-click', e, data);
            this.active = '';
        },
        touchStart (
            p = '',
            {
                touches: {
                    0: { clientX: x, clientY: y },
                },
            }
        ) {
            Object.assign(this.touche, { x, y });
            this.active = p;
            this.defaultClick = false;
        },
        mouseDown (
            p = '',
            {
                clientX: x, clientY: y,
            }
        ) {
            Object.assign(this.touche, { x, y });
            this.active = p;
            this.defaultClick = false;
        },
        symStart (arg) {
            this.active = arg;
            this.defaultClick = false;
        },
        deleteClick ($event, btn, cls) {
            this.active = cls;
            this.defaultClick = false;
            this.pressDown($event, btn);
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.num-ul,
.sym-pad {
  height: 100%;
  width: 100%;
  padding: 10px;
}
.num-ul {
  padding-right: 15px;
}

.k-btn-wrap {
  position: relative;
  background: #f5f7f8;
  overflow: hidden;
  .num-ul {
    overflow-y: auto;
  }
}

.k-btn-box {
  z-index: 0;
}
</style>
